<template>
    <div>
        <div class="top">
<!--            <img class="activityPicWidth" :src="getUrl(activity.picPath)" alt="">-->
            <div class="topOne">
                <h2 style="text-align: left">活动名称 ：{{activity.labelName}}</h2>
                <h2 style="text-align: left;display: inline-block">详情描述 ：</h2>
                <div class="topTwo">
                    <span style="text-align: left;display: block">
                        {{activity.shortDesc}}
                    </span>
                </div>
            </div>
            <div class="three" style="text-align: right;">
                <el-button @click="showProduct">添加商品</el-button>
            </div>
        </div>
        <el-dialog :title="titles" :visible.sync="dialogFormVisibleProduct" @close="resetForm" style=""> <!--取消后清空表格中数据-->
            <el-table
                ref="multipleTable"
                :data="tbActProductListAll"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChanges">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>

                <el-table-column
                    prop="labelName"
                    label="商品名称"
                    width="200"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="shortDesc"
                    label="商品描述"
                    width="200"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="store"
                    label="商品库存"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="商品价格"
                    width="120">
                </el-table-column>

                <el-table-column
                    prop="tid"
                    label="商品编号"
                    width="300">
                    <!--                    <template slot-scope="scope">{{ scope.row.tid }}</template>-->
                </el-table-column>
            </el-table>
<!--            <div style="margin-top: 20px">-->
<!--                <el-button @click="toggleSelection([tbActProductListAll[1], tbActProductListAll[2]])">切换第二、第三行的选中状态</el-button>-->
<!--                <el-button @click="toggleSelection()">取消选择</el-button>-->
<!--            </div>-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button type="primary" @click="chooseProductMethod()">确 认</el-button>
            </div>
        </el-dialog>


        <el-table :data="data"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column prop="tid" label="商品编号"></el-table-column>
            <el-table-column prop="tbPrdInfo.labelName" label="商品名称" width="170px"></el-table-column>
            <el-table-column prop="tbPrdInfo.shortDesc" label="商品描述" width="170px"></el-table-column>
            <el-table-column prop="tbPrdInfo.picPath" label="商品图片" width="170px">
                <template slot-scope="scope">
                    <img class="productPicWidth" :src="getUrl(scope.row.tbPrdInfo.picPath)" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="store" label="商品库存" width="200px" style=""></el-table-column>
            <el-table-column prop="oldPrice" label="商品原价" width="170px"></el-table-column>
            <el-table-column prop="newPrice" label="活动价格" width="170px"></el-table-column>
            <el-table-column prop="state" label="编辑状态">
                <template slot-scope="scope">
                    <el-tag type="danger" @click="update(scope.row)">修改商品</el-tag>
                </template>

            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                background
                center
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="pageList"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tbActProductList.length">
                <!--           layout加上 sizes,    :page-sizes="[6, 7, 8, 9 ,10]"-->
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="resetForm"> <!--取消后清空表格中数据-->
            <el-form :model="productInfo" :rules="rules" ref="productInfo">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input disabled='disabled'   v-model="productInfo.tbPrdInfo.labelName" ></el-input>
                </el-form-item>
<!--                <el-form-item label="商品详情" :label-width="formLabelWidth" >-->
<!--                    <el-input disabled='disabled'  type="textarea" :rows="5"  v-model="productInfo.tbPrdInfo.shortDesc"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="商品库存" :label-width="formLabelWidth" >-->
<!--                    <el-input disabled='disabled'  v-model="productInfo.store"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="商品原价" :label-width="formLabelWidth">
                    <el-input disabled='disabled' v-model="productInfo.oldPrice"></el-input>
                </el-form-item>
                <el-form-item label="活动价格" :label-width="formLabelWidth" prop="newPrice">
                    <el-input  placeholder="请输入活动价格"  v-model="productInfo.newPrice"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button type="primary" @click="sub('productInfo')">确 认</el-button>
            </div>
        </el-dialog>
<!--        <el-row>-->
<!--            <el-col :span="5" v-for="(o, index) in tbActProductList" :key="index" :offset="index > 0 ? 1 : 0">-->
<!--                <el-card class="cardHeight" :body-style="{ padding: '0px' }">-->
<!--                    <img :src="getUrl(o.tbPrdInfo.picPath)"class="image">-->
<!--                    <div style="padding: 14px;text-align: left;font-size: 15px">-->
<!--                        <span style="display:inline-block;width: 80px">商品名称:</span><span>{{o.tbPrdInfo.labelName}}</span><br/>-->
<!--                        <span style="display:inline-block;width: 80px">商品描述:</span><span>{{o.tbPrdInfo.shortDesc}}</span><br/>-->
<!--                        <span style="display:inline-block;width: 80px">商品库存:</span><span>{{o.store}}</span><br/>-->
<!--                        <span style="display:inline-block;width: 80px">商品原价:</span><span style="text-decoration:line-through">{{o.oldPrice}}</span><br/>-->
<!--                        <span style="display:inline-block;width: 80px">活动价格:</span><span>{{o.newPrice}}</span><br/>-->
<!--                        <div class="bottom clearfix">-->
<!--                            <time class="time">{{ currentDate }}</time>-->
<!--                            <el-button type="text" class="button">操作按钮</el-button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "ActivityContent",
        inject:['reload'],//注入reload方法
        computed:{
            ...mapGetters([
                "getActivity"
            ]),
            // 计算分页所显示的数据
            data() {
                if(this.tbActProductList != null){
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.tbActProductList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                }
            }
        },
        data(){
            return{
                // 多选
                multipleSelections: [],
                // 存放修改活动商品价格
                tbActProduct:{},
                title:'修改活动商品',
                titles:'添加活动商品',
                // 活动编号
                activity:'',
                //活动商品的具体信息
                tbActProductList:[],
                //未添加活动商品的具体信息
                tbActProductListAll:[],
                currentDate: new Date(),
                // 当前页
                currentPage: 1,
                // 每页显示 5 条数据
                pageSize: 5,
                // 每页显示多少条数据的数组
                pageList: [5, 10, 15, 20],
                dialogFormVisible: false,
                dialogFormVisibleProduct: false,
                // 存放修改的活动商品信息
                productInfo:{
                    store: '',
                    oldPrice: '',
                    newPrice: '',
                    tbPrdInfo: {},
                },
                // 表格宽度
                formLabelWidth: '120px',
                rules: { //校验输入框输入规则
                    newPrice:[
                        { required: true, message: '请输入活动价格', trigger: 'blur' },
                    ],

                }
            }
        },
        created() {
            this.activity = this.$store.state.activity;
            this.getTbActivityProductList();
            // console.log(this.activity);
        },
        methods:{
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChanges(val) {
                this.multipleSelections = val;
            },
            // 修改当前页显示 多少数据
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            // 修改当前是 第几页
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            // 获取活动里面的所有商品
            getTbActivityProductList(){
                this.$http.post("product/activity/findTbActProductByTid",{tid:this.activity.tid}).then((res)=>{
                    this.tbActProductList = res.data.tbActProductList;
                    console.log(this.tbActProductList);
                })
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/activity/findProductPicByPath?name=`+picPath;
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = [];
                for (let valKey in val) {
                    this.multipleSelection.push(val[valKey].tid)
                }
            },
            resetForm() {
                this.dialogFormVisible = false
                this.dialogFormVisibleProduct = false
                this.reload();
            },
            update(row) {
                this.dialogFormVisible = true;
                console.log(row);
                this.productInfo = row;
            },
            sub(formName) {
                // 对整个表单进行校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("测试")
                        console.log(this.productInfo.id);
                        console.log(this.productInfo.newPrice);
                        this.tbActProduct = {
                            id : this.productInfo.id,
                            newPrice: this.productInfo.newPrice,
                        }
                        this.$http.post("product/activity/updateActivityPriceById",this.tbActProduct).then(data => {
                            console.log(data);
                            if (data.data.code === 1) {
                                // alert("数据改变");
                                this.$message({
                                    type: 'success',
                                    message: data.data.msg,
                                });
                                this.reload()//直接调用刷新方法
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: data.data.msg,
                                });
                                this.reload()//直接调用刷新方法
                            }
                        })
                    } else {
                        console.log('error submit!!')
                        return false;
                    }
                })
            },
            // 显示商品弹窗
            showProduct(){
                this.dialogFormVisibleProduct = true;
                let arr = [];
                for(let i = 0; i < this.tbActProductList.length ;i++){
                    arr.push(this.tbActProductList[i].pid);
                }
                console.log(arr);
                this.$http.put("product/activity/findTbActProductByArr",arr).then((res)=>{
                    console.log(res.data);
                    this.tbActProductListAll =  res.data;
                })
            },
            // 往活动里面添加活动商品
            chooseProductMethod(){
                console.log(this.activity.tid);
                let arr = [];
                let arr2 = [];
                arr.push(this.activity.tid);
                for(let i = 0; i < this.multipleSelections.length ;i++){
                    let product = {
                        tid:this.multipleSelections[i].tid,
                        store:100,
                        price:this.multipleSelections[i].price,
                    };
                    let tid = {
                        tid:this.multipleSelections[i].tid,
                    }
                    arr.push(product);
                    arr2.push(tid.tid);
                }
                console.log(arr);
                console.log(arr2);
                this.$http.put("product/activity/saveActivityProduct",arr).then((res)=>{
                    if (res.data.code === 1) {
                        // alert("数据改变");
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                        });

                        this.$http.put("product/activity/subtractStore",arr2).then((data)=>{
                            if (data){
                                console.log(123)
                            }
                        })

                        this.reload()//直接调用刷新方法
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.data.msg,
                        });
                        this.reload()//直接调用刷新方法
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .productPicWidth{
        width: 100px;
    }
    .cardHeight{
        height: 580px;
    }
    .activityPicWidth{
        width: 100%;
        height: 130px;
    }
    .top{
        width: 100%;
        height: 200px;
        /*border: 1px solid black;*/
    }
    .top .topTwo{
        width: 89.5%;
        height: 50px;
        /*border: 1px solid black;*/
        display: inline-block;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        height: 300px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
